import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, Popconfirm, Row, Space, message } from 'antd';
import { useEffect, useState } from 'react';
import { getPet,delPet } from '../Register/service';

const { Meta } = Card;
function Pet(props) {

  const [petList,setPetList] = useState([])
  const [refreshCount,setRefreshCount] = useState(0)

  const fetchPet = async () => {
    const result = await getPet({
      uid: window.localStorage.getItem('token'),
    });
    console.log(result);
    if(result.state === 200){
      setPetList(result.data)
    }
  };
  useEffect(() => {
    fetchPet();
  }, [refreshCount]);
  return (
    <PageContainer ghost>
      <Row gutter={8}>
        {
          petList.map((x,idx) => {
           return(
            <Col key={idx}>
            <Card
              hoverable
              style={{ width: 200 }}
              cover={
                <img
                  alt="example"
                  src={x?.picture && JSON.parse(x?.picture)}
                />
              }
            >
              <Space>
                <Meta description={x?.issue_time && x?.issue_time} />
                <Popconfirm title="确定删除吗" okText="确定" cancelText="取消" onConfirm={async () => {
                  const result = await delPet({
                    pid:x?.pid
                  })
                  if(result.state === 200){
                    message.success('删除成功')
                    setRefreshCount(refreshCount + 1) 
                  }
                }}>
                  <Button type="link">删除</Button>
                </Popconfirm>
              </Space>
            </Card>
          </Col>
           )
          })
        }
        {/* <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Space>
              <Meta description="2022-01-01" />
              <Popconfirm title="确定删除吗" okText="确定" cancelText="取消" >
                <Button type="link">删除</Button>
              </Popconfirm>
            </Space>
          </Card>
        </Col>
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col>
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col>
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col>
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col>
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col>{' '}
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col>
        <Col>
          <Card
            hoverable
            style={{ width: 200 }}
            cover={
              <img
                alt="example"
                src="https://th.bing.com/th?id=OIP.AtfZx4HT3t2igtiBG1MhxQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
              />
            }
          >
            <Meta description="2022-01-01" />
          </Card>
        </Col> */}
      </Row>
    </PageContainer>
  );
}

export default Pet;
